<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template v-slot:center>
        购物街
      </template>
    </nav-bar>
    <scroll class="content">
    <!-- 轮播图 -->
    <home-swiper :banners="banners"/>
    <!-- 特点介绍 -->
    <home-recommend :recommends="recommends"/>
    <!-- tab标签 -->
    <tab-controller class="tab-controller" 
                    :titles="tabTitles"
                    @tabChange='tabChange'/>
    <good-list :goods="tabTypeList"/>
    </scroll>
  </div>
</template>
<script>
  import NavBar from '@/components/common/navbar/NavBar';
  import HomeSwiper from '@/views/home/childrenComponents/HomeSwiper';
  import HomeRecommend from '@/views/home/childrenComponents/HomeRecommend';
  import TabController from '@/components/content/tabcontroller/TabController';
  import GoodList from '@/components/content/goods/GoodList';
  // 加载滚动插件
  import Scroll from '@/components/common/scroll/Scroll';
  import {
    getHomeMultidata,
    getHomeGoods
  } from '@/networks/home'
  export default {
      name: 'Home',
      data(){
        return {
          banners:[],
          recommends:[],
          tabTitles:[
            {id:1, title:'流行', type:'pop'},
            {id:2, title:'新款', type:'new'},
            {id:3, title:'精选', type:'sell'},
          ],
          goods:{
            'pop':{ page:0, list:[] },
            'new':{ page:0, list:[] },
            'sell':{ page:0, list:[] }
          },
          tabControllerIndex:0
        }
      },
      components: {
        NavBar,
        HomeSwiper,
        HomeRecommend,
        TabController,
        GoodList,
        Scroll
      },
      created() {
        // 获得轮播图
        this.getHomeMultidata();
        // 获得详细商品
        this.tabTitles.forEach(val => {
          this.getHomeGoods(val.type)
        });
      },
      methods:{
        getHomeMultidata () {
          getHomeMultidata().then( res => {
            // console.log(res);
            this.banners=res.data.data.banner.list;
            this.recommends=res.data.data.recommend.list;
          })
        },
        getHomeGoods (type) {
          let page=this.goods[type].page + 1;
          getHomeGoods(type, page).then( res => {
            console.log(res);
            // 将新请求来的数组中的元素push到现有的数组中
            this.goods[type].list.push(...res.data.data.list);
          });
        },
        // 切换分类显示方法
        tabChange (index) {
          this.tabControllerIndex=index;
        }
      },
      computed : {
        // 返回切换目标的goods数组
        tabTypeList(){
          return this.goods[this.tabTitles[this.tabControllerIndex].type].list;
        }
      }
  }
</script>
<style scoped>
  #home {
    height: 100vh;
    position: relative;
  }
  .home-nav {
    background-color: var(--color-tint);
    color: #fff;
    position: fixed;
    top: 0;
    right: 0; 
    left: 0;
    z-index: 9;
  }
  .tab-controller {
    position: sticky;
    top: 44px;
    z-index: 9;
  }
  .content{
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
</style>